Vue笔记（三）——组件&插槽

组件

是前端在单页面上最好的一种实现方式，每个组件有独立的作用域，且可以相互通信。

单页面应用 -- SPA

页面之间的跳转变成了组件之间的切换，不需要重新加载整个页面，也不用考虑页面的生命周期，换成组件的生命周期，在性能上大大的提升了。

Vue 组件的实现

全局组件

<div id="app">
    <!-- 组件的使用 -->
    <global-component></global-component>
</div>

<!-- 组件的定义：Vue.component(组件名称，{template}) -->
Vue.component('global-component',{
    template:'<h1>全局组件</h1>'
})
let vm = new Vue({
    el:'#app'
});

最终的渲染结果

<div id="#app">
    <h1>全局组件</h1>
</div>

局部组件

<div id="app">
    <!-- 组件的使用 -->
    <private-component></private-component>
</div>

// 局部组件的定义：components:{组件名字：{}}
let vm = new Vue({
    el:'#app',
    components:{
        'private-component':{
             template:'<h1>局部组件</h1>'
        }
    }
});

最终渲染的结果

<div id="app">
    <h1>局部组件</h1>
</div>

组件是一个单独的作用域

每一个组件有单独的作用域

let vm = new Vue({
    el:'#app',
    data:{count:10},
    methods:{
        increment:function(){
            this.count +=1;
        }
    },
    components:{
        <!-- 这里写组件 -->
        'component1':{
            template:'<button v-on:click="increament">{{count}}</button>',
            data:function(){
                return {count:0}
            },
            methods:{
                increment:function(){
                    this.count +=1;
                }
            }
        }
    }
});

渲染结果为：

<div id="app">
    <p>10</p>
    <!--
        此按钮每次点击都会自增，而p标签永远都是为10，
        原因是组件的作用域是单独的
    -->
    <button>0</button>
</div>

特殊的HTML结构中使用 is

特殊结构：下拉列表（select）子元素必须为option，则在使用组件的时候用is

• 作用：主要用于tab切换

<!-- 使用v-for指令时：单个不用加（）; -->
components:{
    template:'<select><option :value="obj.value" v-for="obj in geder">{{obj.text}}</option></select>',
    data:function(){
        return {
            geder:[{text:'男',value:1}{text:'女',value:0}]
        }
    }
}

动态组件 :is

通过控制:is=''的值（即组件的名字）来显示不同的组件

this.color = this.color == 'red' ? 'green' : 'red';

组件封装

内部返回对象使用闭包函数返回一个对象；

组件属性

组件的属性要先声明后使用：即先使用props['属性名'...]，再进行调用

<div id="app">
    <!-- 组件的使用 -->
    <componnent1 title="组件属性" on-bind:text="mess"></componnent1>
</div>

// 全局组件的定义 Vue.component(组件名称，{template})

// 局部组件的定义
let vm = new Vue({
    el:'#app',
    data:{
        mess:'动态属性'
    },
    <!-- 局部组件 -->
    componnets:{
        'componnent1':{
            template:'<h1>{{title+text}}</h1>',
            props:['title','text']
        }
    }
});

最终渲染结果

<div id="app">
    <h1>组件属性</h1>
</div>

组件自定义属性

• 格式：<组件名 v-on:自定义事件名="">
• 使用：自定义事件名不需要声明，直接用$emit()触发

// 定义：
<div id="app">
    <!-- 组件名 -->
    <component v-on:事件名><component>
</div>

// 调用：直接使用组件对象 this.$emit('事件名')

slot分发内容

Vue组件默认是覆盖渲染的，则使用slot分发内容

Vue.component('component1',{
    tempalte:`
        <div>
            <h1>Tom<h1>
            <!-- 使用slot接收组件中的标签 -->
            <slot></slot>
        </div>
    `
})

具名 slot

作用：用于将标签放到特定的位置，则可以使用slot属性

<div id="app">
    <!-- 使用组件 -->
    <component1>
        <!-- 显示标签:使用slot 属性 -->
        <h1 slot=tom"">tom</h1>
    </component1>
</div>

Vue.component('component1'{
    template:'<div><slot name ='tom'></slot><button></button></div>'
});

模板写法

将template的内容单独拿出来，写成一个template标签
只能有一个根节点\

// 定义
<template id="template1">
    <div></div>
</template>

// 使用
let vm = new Vue({
    el:'#app',
    components:{
        component1:{
            template:'#template1'
        }
    }
});